import { useRequest } from "ahooks";
import React, { useMemo, useState, useCallback } from "react";
import { Table, Tag, Button, Divider, Popconfirm, message } from "antd";
import { getAdminListApi, deleteAdminItemApi } from "@/api/user";
import AdminModal from "./AdminModal";
const AppAdminList = () => {
  // 序号跟着变
  //点击Button弹出Popconfirm再点击确认时触发
  const confirm = (record) => {
    console.log("进来删除", record);
    // this.setState({data:[...this.state.data]}) //此处不用解构赋值也可更新数据
    handleDelete(record.adminid);
  };
  const [current, setCurrernt] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const { data = [], loading, refresh } = useRequest(getAdminListApi);
  const reverseData = useMemo(() => data.slice().reverse(), [data]);
  // 操作弹窗
  const [openModal, setOpenModal] = useState(false);
  //编辑弹窗
  const [adminname, setAdminname] = useState("");
  const columns = useMemo(
    () => [
      {
        title: "序号",
        render: (_, record, index) => (current - 1) * pageSize + index + 1,
      },
      {
        title: "Id",
        dataIndex: "adminid",
        key: "adminid",
        eclipise: true,
      },
      {
        title: "管理员名称",
        dataIndex: "adminname",
        key: "adminname",
      },
      {
        title: "管理员角色",
        dataIndex: "role",
        key: "role",
        render: (text) =>
          React.createElement(
            Tag,
            { color: text === 1 ? "red" : "blue" },
            text === 1 ? "管理员" : "超级管理员"
          ),
      },
      {
        title: "操作",
        width: 200,
        render: (_, record) => (
          <>
            {" "}
            <Button
              type="primary"
              danger
              onClick={() => handleEdit(record.adminname)}
            >
              {" "}
              编辑{" "}
            </Button>
            <Popconfirm
              title="确定删除吗？"
              onConfirm={(e) => {
                confirm(record);
              }}
            >
              <Button type="dashed">删除</Button>
            </Popconfirm>
          </>
        ),
      },
    ],
    [current, pageSize]
  );
  const handlePageChange = useCallback((page, size) => {
    console.log("进来参数", page, size);
    setCurrernt(page);
    setPageSize(size);
  }, []);
  const handleCreate = useCallback(() => {
    setAdminname("");
    setOpenModal(true);
  }, []);
  const handleEdit = useCallback((adminname) => {
    setAdminname(adminname);
    setOpenModal(true);
  }, []);
  const handleDelete = useCallback((adminid) => {
    deleteAdminItemApi(adminid).then((res) => {
      try {
        console.log("成功", res);
        refresh();
      } catch (error) {}
    });
  }, []);

  return (
    <>
      <Button type="primary" onClick={handleCreate}>
        新建管理员
      </Button>
      <Divider />
      <Table
        loading={loading}
        pagination={{ onChange: handlePageChange }}
        dataSource={reverseData}
        columns={columns}
        rowKey="_id"
      ></Table>
      <AdminModal
        refresh={refresh}
        open={openModal}
        adminname={adminname}
        toggleOpen={() => setOpenModal(!openModal)}
      />
    </>
  );
};
export default AppAdminList;
